import React from 'react'
import { Menu } from 'antd'
import { MenuData, filterMenuItemsByLevel } from '../../menuData'
import './SideMenu.css'

export default function SideMenu({ userLevel, activeKey, onMenuClick, collapsed }) {
  // 根据用户等级过滤菜单数据
  const filteredMenu = filterMenuItemsByLevel(MenuData, userLevel)

  return (
    <div className={`side-menu-container ${collapsed ? 'collapsed' : ''}`}>
      <p><img src={require('./logo.png')} alt="logo" className="logo" />证书认证系统</p>
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={[activeKey]}
        onClick={({ key }) => onMenuClick(key)}
        items={filteredMenu}
        className="side-menu"
        inlineCollapsed={collapsed}
      />
    </div>
  )
}
